<template>
  <div>
    <moon-button @click="toggle">显示对话框</moon-button>
    <moon-dialog
      @closeEvent="isVisible=!isVisible"
      :visible="isVisible"
      :closeOnClickOverlay="true"
      :ok="f1"
      :cancel="f2"
    >
      <template v-slot:title>
        <strong>标题</strong>
      </template>
      <template v-slot:content>
        <div>对话框内容</div>
        <div>对话框内容</div>
        <div>对话框内容</div>
      </template>
    </moon-dialog>
  </div>
</template>

<script>
import MoonButton from '../lib/MoonButton'
import MoonDialog from '../lib/MoonDialog.vue'
export default {
  components: {
    MoonDialog,
    MoonButton
  },
  data() {
    return {
      isVisible: false,
      sourceCodeTitle: '点击遮罩层关闭',
      sourceCode: `<template>
  <div>
    <moon-button @click="toggle">显示对话框</moon-button>
    <moon-dialog
      @closeEvent="isVisible=!isVisible"
      :visible="isVisible"
      :closeOnClickOverlay="true"
      :ok="f1"
      :cancel="f2"
    >
      <template v-slot:title>
        <strong>标题</strong>
      </template>
      <template v-slot:content>
        <div>对话框内容</div>
        <div>对话框内容</div>
        <div>对话框内容</div>
      </template>
    </moon-dialog>
  </div>
</template>

<script>
import MoonButton from '../lib/MoonButton'
import MoonDialog from '../lib/MoonDialog.vue'
export default {
  components: {
    MoonDialog,
    MoonButton
  },
  data() {
    return {
      isVisible: false
    }
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible
    },
    f1() {
      console.log('ok')
      // 若 return false则确认无法关闭
      // return false
    },
    f2() {
      console.log('cancel')
    }
  }
}
</` + 'script>'

    }
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible
    },
    f1() {
      console.log('ok')
      // 若 return false则确认无法关闭
      // return false
    },
    f2() {
      console.log('cancel')
    }
  }
}
</script>
